<template>
    <div>
        <el-dialog
            title="新增交通事故信息"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
            center
        >
        <!-- 表单内容有道路名称roadName  路口名称intersectionName  事故描述accidentDescription 伤亡人数casualties  发生时间occurrenceTime-->
            <el-form ref="form" :model="intersectionData" label-width="100px" :rules="rules">
                <el-form-item label="道路名称" prop="roadId">
                   <el-select v-model="intersectionData.roadId"  @change="getIntersectionNamesByRoadId">
                       <el-option v-for="item in roadList" :key="item.id" :label="item.roadName" :value="item.id"></el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="路口名称" prop="intersectionId" >
                    <el-select v-model="intersectionData.intersectionId" >
                       <el-option v-for="item in intersectionNamesList" :key="item.id" :label="item.intersectionName" :value="item.id"></el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="事故描述" prop="accidentDescription">
                    <el-input type="textarea" v-model="intersectionData.accidentDescription" placeholder="请输入事故描述"></el-input>
                </el-form-item>
                <el-form-item label="伤亡人数" prop="casualties">
                    <el-input type="number" v-model="intersectionData.casualties" placeholder="请输入伤亡人数"></el-input>
                </el-form-item>
                <el-form-item label="发生时间" prop="occurrenceTime">
                    <el-date-picker
                        v-model="intersectionData.occurrenceTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>    
                </el-form-item>
                <!-- 取消/新增按钮 -->
                 <div class="dialog-footer">
                    <el-button @click="handleClose()">取消</el-button>
                    <el-button v-loading="loading" style="margin-left: 40px" type="primary" @click="bindSave">新增</el-button>
                 </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

    import { insertTmTrafficAccident, getTmIntersectionByRoadId } from '@/api/tm-road'

    export default {
        data(){
            return {
                dialogVisible: false,
                loading: false,
                intersectionData: {
                    roadName: "",
                    roadId: "",
                    intersectionName: "",
                    intersectionId: '',
                    accidentDescription: '',
                    casualties: '',
                    occurrenceTime: ''
                },
                rules: {
                    roadId: [
                        { required: true, message: '请输入道路名称', trigger: 'blur' }
                    ],
                    
                    accidentDescription: [
                        { required: true, message: '请输入事故描述', trigger: 'blur' }
                    ],
                    casualties: [
                        { required: true, message: '请输入伤亡人数', trigger: 'blur' }
                    ],
                    occurrenceTime: [
                        { required: true, message: '请选择发生时间', trigger: 'change' }
                    ]
                },
                intersectionNamesList: []
            }
        },
        props: {
            roadList: {
                type: Array,
                default: () => []
            }
        },
        methods: {
            open(){
                console.log(this.roadList)
                this.intersectionData = {
                    roadName: "",
                    roadId: "",
                    intersectionName: "",
                    intersectionId: '',
                    accidentDescription: '',
                    casualties: '',
                    occurrenceTime: ''
                }
                this.dialogVisible = true
            },
            handleClose(){
                this.dialogVisible = false
            },
            async bindSave(){
                // 非空校验
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.bindSaveRequest()
                    } else {
                        return false
                    }
                })
            },
            async bindSaveRequest(){
                this.loading = true;
                const {  roadId, intersectionId , accidentDescription, casualties, occurrenceTime } = this.intersectionData;
                // 通过 roadId 和 intersectionId 找到 roadName和intersectionName
                const intersectionName = this.intersectionNamesList.find(item => item.id === intersectionId).intersectionName
                const roadName = this.roadList.find(item => item.id === roadId).roadName
                const params = {
                    roadName,
                    roadId,
                    intersectionName,
                    intersectionId,
                    accidentDescription,
                    casualties,
                    occurrenceTime: occurrenceTime.toString()
                }
                const { code = undefined } = await insertTmTrafficAccident({ ...params })
                if (code === 200) {
                    this.$message.success('新增成功')
                    this.$emit('refreshIntersectionData')
                    this.handleClose()
                } else {
                    this.$message.error('新增失败')
                }
                this.loading = false;
            },
            // 根据道路id查路口
            async getIntersectionNamesByRoadId( roadId ) {
                this.intersectionNamesList = [];
                this.listLoading = true;
                const params = {
                    roadId,
                    pageNum: 1,
                    pageSize: 1000,
                }
                const { code = undefined, items = {} } = await getTmIntersectionByRoadId({ ...params })
                if (code === 200) {
                    this.intersectionNamesList = items;
                    setTimeout(() => {
                        this.listLoading = false
                    }, 200)
                } else {
                    this.$message.error('获取数据失败')
                    this.listLoading = false
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: center;
    margin-top: 20px;
}
</style>